<template>
	<view class="content">

		<view class="blank">

		</view>

		<view class="text-area">
			<view class="item-list">
				<view class="item-left">
					店铺名称
				</view>
				<view class="item-right">
					<input type="text" v-model="shop_name" placeholder="请输入店铺名称">
				</view>

			</view>
			<view class="item-list">
				<view class="item-left">
					店铺地址
				</view>
				<view class="item-right">
					<input type="text" v-model="shop_add" placeholder="请输入店铺地址">
				</view>

			</view>
			<view class="item-list">
				<view class="item-left">
					姓名
				</view>
				<view class="item-right">
					<input type="radio" v-model="name" placeholder="请输入姓名">
				</view>


			</view>
			<view class="item-list">

				<view class="item-left">
					性别
				</view>
				<view class="item-right">
					<view class="checkbox">
						<uni-data-checkbox selectedColor="orange" v-model="value" selectedTextColor="gray"
							:localdata="range" @change="change"></uni-data-checkbox>
					</view>
				</view>

			</view>
		</view>
		<view class="item-list" style="margin: 0 20px;">

			<view class="item-left">
				手机号
			</view>
			<view class="item-right">
				<yl-phone-msg-code :req-mobile-code="getCode" mobileStyle="font-size:12px;text-align:right;"
					@codeChange="codeChange" getCodeStyle="font-size:12px;color:gold;height:10px;margin-right:10px"
					codeStyle="font-size:13px;" />
			</view>

		</view>
		<view class="item-list getCode" style="margin: 0 20px;">

			<view class="item-left">
				验证码
			</view>
			<view class="item-right">
				</yl-phone-msg-code>
			</view>
		</view>


		<button @click="sub_fn" class="btn-registe">
			保存
		</button>

	</view>
	</view>

	</view>
</template>

<script>
	
	var dsx = null
	export default {
		data() {
			return {
				result:"78789",
				code:"",
				timer: null,
				phone: "",
				value: 0,
				range: [{
					"value": 0,
					"text": "男"
				}, {
					"value": 1,
					"text": "女"
				}],
				shop_name: "",
				shop_add: "",
				name: "",
				msgCodeText: "",
				current: 0,
				customStyle: {
					color: "#ffffff"
				}, // 自定义样式
			}
		},
		onLoad() {
			console.log("7777")
			console.log(this)
			dsx = this
		},
		methods: {
			radioChange: function(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.detail.value) {
						this.current = i;
						break;
					}
				}
			},
			async getCode(mobile, code) {
				
				
				//发送网络请求，传入一个mobile，获取验证码
				// let result = await reqMobileCode(mobile)
				// console.log(result)
				let result = 1111
				console.log(dsx.result);
				dsx.result = result
				
			},
			/**
			 * 验证码改变
			 * @param code
			 */
			codeChange(code) {
				console.log(code)
				this.code=code.code
				this.phone=code.mobile
			},
			change(e) {
				console.log('e:', e);
			},

			sub_fn() {
				
				console.log(this.code)
				console.log(this.result);
				if(this.code!==""&this.result==this.code){
					uni.showToast({
						title: "注册成功",
						success() {
							console.log("弹框成功")
							setTimeout(() => {
								uni.setStorage({
									key:'state',
									data:"ok"
								})
								uni.switchTab({
									url: '../../pages/index/index',
								})
							} , 1300)
						},
						fail() {
							console.log("弹框失败")
						},
						complete() {
							console.log("弹框完成")
						}
					})
				
				}else{
					console.log("失败");
				}
				
				
				

				//判断验证码和code是否相同，相同则将信息写入数据库
				// uni.request({
				// 	url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
				// 	data: {
				// 		shop_name: this.shop_name,
				// 		shop_add: this.add,
				// 		name: this.name,
				// 		sex:this.sex,
				// 		phone: this.phone,
				// 	},
				// 	header: {
				// 		'custom-header': 'hello' //自定义请求头信息
				// 	},
				// 	success: (res) => {
				// 		console.log(res.data);
				// 		if (res.data) {
							
				// 		}
				// 	}
				// });
			},
			onUnload() {
				if (this.timer) {
					clearTimeout(this.timer);
					this.timer = null;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.btn-registe {
		width: 90%;
		height: 30px;
		line-height: 30px;
		background-color: #faad14;
		margin-top: 100px;
		font-size: 14px
	}

	.item-left {
		font-size: 14px;
	}

	.blank {
		height: 8px;
		width: 100%;
		background-color: #eee;

	}

	.top_title {
		color: lightgrey;
		height: 80px;
		line-height: 80px;
		font-size: 20px;
		font-weight: 400;
		color: black;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		margin: 0 20px;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.item-list {
		height: 40px;
		width: 100%;
		line-height: 40px;
		border-bottom: 1px solid lightgray;
		display: flex;
		justify-content: space-between;
	}

	.uni-data-checklist[data-v-84d5d996] {
		top: 0.625rem;

	}

	.item-right>input {
		height: 40px;
		line-height: 40px;
		text-align: right;
		font-size: 12px;
	}

	.content {
		text-align: center;
	}


	.getCodeInner {
		font-size: 20rpx;
		text-align: right;
		color: #faad14;

		marging: 10rpx 20rpx;
	}
</style>
